<template>
  <div class="login page">
        <div class="form">
            <h3 class="title">输入房间名称:</h3>
            <input class="usernameInput" type="text" maxlength="15" v-model='name' @keyup.enter="create" />
            <div>
                <button type="button" class="mui-btn mui-btn-primary" @click="create">确定</button>
                <button type="button" class="mui-btn" @click="goback">取消</button>
            </div>
        </div>
        
    </div>
</template>

<script>
import MSG from "@/api/connectMsg";

export default {
  name: "CreateRoom",
  data() {
    return {
      name: "我的房间"
    };
  },
  created() {},
  mounted() {
    console.log("createroom mounted");
    this.name = this.$store.getters.userName + "的房间";
  },
  methods: {
    create() {
      this.$store
        .dispatch("createRoom", {
          roomName: this.name
        })
        .then(rst => {
          if (rst.code) {
            this.$store.dispatch("addRoom", rst.data);
            this.$router.replace("DrawRoom");
          } else {
            Utils.alert(rst.msg);
          }
        });
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss"  scoped>
.page {
  height: 100%;
  position: absolute;
  width: 100%;
}

.login.page {
  background-color: #000;

  .form {
    height: 100px;
    margin-top: -100px;
    position: absolute;

    text-align: center;
    top: 50%;
    width: 100%;

    .usernameInput {
      background-color: transparent;
      border: none;
      border-bottom: 2px solid #fff;
      outline: none;
      padding-bottom: 15px;
      text-align: center;
      width: 400px;
    }
  }

  .title {
    font-size: 200%;
  }

  .usernameInput {
    font-size: 200%;
    letter-spacing: 3px;
  }

  .title,
  .usernameInput {
    color: #fff;
    font-weight: 100;
  }
}
</style>